<template>
  <div class=""></div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {};
  },
  created() {
    this.initDataFun(); // 初始化数据
  },
  mounted() {
    console.log(this.getHTMLString());
    console.log(this.renderContent());
    const newss = this.renderContent2();
    console.log(newss);
    newss.children[0].data.on.click();
  },
  beforeDestroy() {},
  computed: {},
  watch: {},
  methods: {
    // 初始化数据
    initDataFun() {},
    getHTMLString() {
      const arrs = [
        { content: "...1" },
        { content: "...2" },
        { content: "...3" },
      ];
      const HTMLString = `
    <div>
      ${arrs
        .map((arr) => {
          return `<span>${arr.content}</span>`;
        })
        .join("")}
    </div>
  `;
      return HTMLString;
    },
    renderContent() {
      const imgs = [{ url: "..." }, { url: "..." }, { url: "..." }];
      const templete = (
        <div>
          {imgs.map((img) => {
            return <img src={img.url} />;
          })}
        </div>
      );
      return templete;
    },
    renderContent2() {
      const arrs = [
        { content: "...1", isChecked: false },
        { content: "...2", isChecked: false },
        { content: "...3", isChecked: false },
      ];
      const templete = (
        <div>
          {arrs.map((arr) => {
            return (
              <div
                class={arr.isChecked ? "className1" : "className2"}
                onclick={(e) => this.handleClick(e, arr)}
              >
                {arr.content}
              </div>
            );
          })}
        </div>
      );
      return templete;
    },
    handleClick(e, data) {
      if (e) e.stopPropagation(); // 阻止事件的向上传播
      console.log(e, data);
    },
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped></style>
